<template>
  <van-cell-group v-for="item in lists" :key="item">
  <van-cell center :icon="item.img" :title="item.title" :value="item.value" :label="item.label" />
  </van-cell-group>
 </template>
 <script setup>
 const lists = [
  {
  img: '/images/avatar1.jpg',
  title: '食品旗舰店',
  value: '星期一',
  label: "您有一条店铺消息"
  },
  {
  img: '/images/avatar2.jpg',
  title: '水果旗舰店',
  value: '星期二',
  label: "亲爱的果粉："
  },
  {
  img: '/images/avatar3.png',
  title: '订阅号消息',
  value: '星期日',
  label: "水果旗舰店：【新到水果新品————粑粑柑、砂糖橘】"
  },
  {
  img: '/images/avatar4.png',
  title: '消息号内容',
  value: '星期一',
  label: "食品旗舰店：大量新品到货，速来选购"
  }
 ]
 </script>
 <style lang="less" scoped>
 :deep(.van-cell) {
  .van-cell__left-icon {
  width: 40px;
  height: 40px;
  .van-icon__image {
  width: 100%;
  height: 100%;
  }
  }
  .van-cell__title {
  .van-cell__label {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 165px;
  }
  } 
 }
 </style>